<template>
  <view class="category">
    <!-- 搜索框开始 -->
    <YgSearch></YgSearch>
    <!-- 搜索框结束 -->

    <!-- 内容开始 -->
    <view class="content">
      <!-- 左侧导航 -->
      <view class="left">
        <view
          :class="currentIndex === index1 ? 'title-item active' : 'title-item'"
          v-for="(item1, index1) in title"
          :key="index1"
          @click="handleMenuSelect(index1)"
          >{{ item1 }}</view
        >
      </view>

      <!-- 右侧内容 -->
      <scroll-view class="right" scroll-y :scroll-top="scrollTop">
        <view class="goods-group" v-for="item1 in goods" :key="item1.cat_id">
          <view class="goods-title"> / {{ item1.cat_name }} /</view>
          <view class="goods-list">
            <navigator
              v-for="item2 in item1.children"
              :key="item2.cat_id"
              :url="'/pages/goods_list/goods_list?id=' + item2.cat_id"
            >
              <image :src="item2.cat_icon" mode="widthFix"></image>
              <view class="goods-subtitle">{{ item2.cat_name }}</view>
            </navigator>
          </view>
        </view>
      </scroll-view>
    </view>
    <!-- 内容结束 -->

    <!-- 导航开始 -->
    <view class="catitem  u-flex">
      <navigator
        v-for="item in catitems"
        :key="item.name"
        class="u-flex-1 u-padding-30"
      >
        <u-image :src="item.image_src" width="100%" mode="widthFix"></u-image>
      </navigator>
    </view>
  </view>
</template>

<script>
// 商品分类数据  大数组
let categories = [];
export default {
  data() {
    return {
      //左侧 标题数组
      title: [],
      //右侧 商品内容
      goods: [],
      //选中标题的下标
      currentIndex: 0,
      //返回顶部
      scrollTop: 0,
    };
  },
  onLoad() {
    // 获取缓存中的数据
    let storageCategory = uni.getStorageSync("category");
    // 判断缓存是否存在
    if (storageCategory) {
      //存在，判断有没有过期 设置 过期时间30s
      if (Date.now() - storageCategory.time > 10 * 1000) {
        //过期了，重新获取数据
        console.log("时间过期");
        this.getCategory();
      } else {
        //没过期，修改数据来源
        console.log("没有过期 可以直接使用");
        categories = storageCategory.data;
        this.title = categories.map((v) => v.cat_name);
        this.goods = categories[0].children;
      }
    } else {
      //不存在，获取数据
      console.log("数据不存在");
      this.getCategory();
    }
  },
  methods: {
    //点击左侧标题栏
    handleMenuSelect(index) {
      this.currentIndex = index;
      this.goods = categories[index].children;
      //点击返回顶部

      // 设置右侧的滚动距离 为 0
      // 如果两次设置的值 都是相同 的那么等于没有设置过  又该怎么办了
      //每一次点击的时候 都生成一个不重复的小于1的小数 无线接近于 0
      this.scrollTop = Math.random() * Math.random() * Math.random();
    },

    //封装 请求
    async getCategory() {
      const res = await this.$u.get("/categories");
      categories = res.message;
      this.title = categories.map((v) => v.cat_name);
      this.goods = categories[0].children;
      //把数据存储到缓存中
      uni.setStorageSync("category", {
        time: Date.now(),
        data: res.message,
      });
    },
  },
};
</script>

<style lang="scss">
.category {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
  overflow: hidden;
  display: flex;
  .left {
    width: 180rpx;
    overflow: auto;
    .title-item {
      height: 80rpx;
      font-size: 28rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .active {
      color: #e03440;
      position: relative;
      // border-left: 5rpx solid $themeColor;
      &::before {
        content: "";
        width: 5rpx;
        height: 80%;
        background-color: #e03440;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        position: absolute;
      }
    }
  }
  .right {
    flex: 1;
    overflow: auto;
    .goods-group {
      .goods-title {
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
      }

      .goods-list {
        display: flex;

        flex-wrap: wrap;
        navigator {
          width: 33.33%;
          text-align: center;
          image {
            width: 60%;
          }

          .goods-subtitle {
            font-size: 26rpx;
          }
        }
      }
    }
  }
}
</style>
